<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            display: flex;
            width: 500px;
            height: 500px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <!-- 
        flex布局：直接干死了float布局。

        四个概念：
            容器：如果一个盒子设置了display: flex;那么这个盒子就叫容器。
            项目：容器中的直接子元素，叫项目
            主轴：项目默认就是在主轴上排列，默认主轴是水平向右的
            交叉轴：和主轴垂直的那个轴，叫交叉轴。

     -->
     <div class="box">
         <div class="item" style="width:100px; height:100px; background:red">son1</div>
         <div class="item" style="width:100px; height:100px; background:blue">son2</div>
         <div class="item" style="width:100px; height:100px; background:yellowgreen">son3</div>
         <div class="item" style="width:100px; height:100px; background:pink">son4</div>
     </div>
</body>
</html>